<template>
	<view class="container">
		<v-tabs class="tabs" v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>
		<scroll-view class="content mt5" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
			<view class="list" v-for="(v,k) in datas" :key="k" :id="`list-${k+1}`">
				<view class="title">
					{{v.channelName}}
				</view>
				<view class="wapper">
					<view class="item" v-for="(s,j) in v.list" @click="toUrl(s)">
						<view class="icon">
							<image :src="uploadUrl + s.imageUrl" alt="" mode="widthFix" />
						</view>
						<view class="text">
							{{s.title}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		uploadUrl
	} from '@/config/index.js'
	import vTabs from '@/v-tabs/v-tabs.vue'
	import {
		nextTick,
		onMounted,
		ref
	} from 'vue';
	import {
		onPageScroll
	} from '@dcloudio/uni-app'
	import {
		request
	} from '../../config';
	const isTabChange = ref(false)
	const current = ref(0)
	const tabs = ref([])
	const datas = ref([])
	const distanceArr = ref([])
	const toView = ref()
	const changeTab = (e) => {
		const id = `list-${e+1}`;
		toView.value = id;
		uni.createSelectorQuery().select('#' + toView.value).boundingClientRect(data => { //目标位置的节点：类或者id
			uni.createSelectorQuery().select(".content").boundingClientRect(
				res => { //最外层盒子的节点：类或者id
					uni.pageScrollTo({
						duration: 100, //过渡时间
						scrollTop: data.top - res.top//到达距离顶部的top值
					})
				}).exec()
		}).exec();
	}
	const toUrl = (e) => {
		window.location.href = e.summary
	}
	const init = async () => {
		const res = await request('/api/v1/channels/1297?apiKey=55b3c71f-ec7e-4728-9564-ddb17d16d1f8')
		datas.value = res.data.value
		tabs.value = res.data.value.map((v) => v.channelName)
		const ids = res.data.value.map((v) => v.id)
		const promises = []
		ids.forEach((v) => {
			promises.push(
				request('/api/v1/contents?apiKey=55b3c71f-ec7e-4728-9564-ddb17d16d1f8', 'post', {
					"siteId": 1297,
					"channelId": v,
					"page": 1,
					"perPage": 20
				})
			)
		})
		const listDatas = await Promise.all(promises)
		datas.value = datas.value.map((v, k) => {
			return {
				...v,
				list: listDatas[k].data.contents
			}
		})
	}
	const getDistanceArr = () => {
		datas.value.map((item, index) => {
			uni.createSelectorQuery().select(`#list-${index + 1}`).boundingClientRect(data => { //目标位置的节点：类或者id
				// 获取当前ID距离顶部的top值
				distanceArr.value.push(data.top)
			}).exec();
		})
	}
	onMounted(() => {
		init()
		getDistanceArr()
	})

	onPageScroll((event) => {
		if (isTabChange.value) {
			return
		}
		const {
			scrollTop
		} = event;
		const skewY = 0 // 偏移量，由于吸顶的tab、头部的显示信息也有高度，素以做了偏移量
		if (scrollTop >= skewY) {
			if (current.value <= 0) { // 在未显示tab并且 current.value <= 0时，
				current.value = 0
			}
			nextTick(() => {
				const length = distanceArr.value.length
				const index = distanceArr.value.findIndex(el => el - skewY - scrollTop > 0)
				// current.value = index > 0 ? index - 1 : length - 1
				current.value = index > 0 ? index - 1 : 0
			})
		}
	})
</script>

<style lang="scss" scoped>
	.container {
		background-color: #efefef;
		min-height: 100vh;
	}
	.tabs{
		position: sticky;
		top: 0rpx;;
		left: 0;
		z-index: 10;
	}
	.content {
		width:100%;
	}

	.list {
		padding: 40rpx;
		margin: 40rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 20rpx;

		.title {
			font-size: 32rpx;
		}

		.wapper {

			margin-top: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.item {
				width: 18%;
				padding: 20rpx;
				border-radius: 8rpx;
				text-align: center;
				// box-shadow: 0rpx 0rpx 4rpx rgba(0, 0, 0, 0.3);
				
				.icon {
					width: 60rpx;
					margin: 0 auto;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 60rpx;
					margin-bottom: 10rpx;
					image {
						width: 100%;
					}
				}

				.text {
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>